<template>
  <div style="background: #fbf9fe;">
    <!--<x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">供应商注册</x-header>-->
    <x-header title="供应商注册" style="background-color: #33bb99;width:100%;position: fixed;top:0;z-index: 99;">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
    </x-header>
    <group title="用户信息" label-width="4.5em" label-margin-right="2em" label-align="right" gutter="0" style="margin-top: 50px;">
      <x-input title="用<i class='vux-blank-half'></i>户<i class='vux-blank-half'></i>名" v-model="user.name" :min="2"></x-input>
      <x-input title="密&emsp;&emsp;&nbsp;码" type="password" placeholder="请输入6-16位数字及字母" v-model="user.pwd"></x-input>
      <x-input title="手&emsp;&emsp;&nbsp;机" name="mobile" v-model="user.mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
      <x-input title="昵&emsp;&emsp;&nbsp;称" v-model="user.nick" :min="2"></x-input>
      <popup-radio title="性.........别" :options="sexList" v-model="user.sex"></popup-radio>
      <div style="border-top: 1px #efefef solid;padding:5px 15px;clear: both;">
        <div class="weui-cell__hd" style="float: left;width: 4.5em;text-align: right;margin-right: 2em;">头&emsp;&emsp;&nbsp;像</div>
        <div class="weui-uploader" @click="upClick('1')">
          <img :src="user.head_url||baseImg+'?x-oss-process=image/resize,w_100,h_100'" class="uploadImg"/>
          <!--<input id="uploaderInput1" class="weui-uploader__input" type="file" accept="image/*" multiple />-->
        </div>
        <upload v-if="up1" @upload="upload1" @uploadReady="fileReady" style="display: none;"></upload>
      </div>
    </group>
    <group title="企业信息" label-width="4.5em" label-margin-right="2em" label-align="right" gutter="0">
      <x-input title="公司名称" v-model="info.company_name"></x-input>
      <x-input title="税务登记证号" v-model="info.tax_register_no"></x-input>
      <x-input title="营业执照号" align="left" v-model="info.business_license_number" button-style="round"></x-input>
      <!--<x-input title="发票抬头" v-model="info.invoices_head" value-text-align="left"></x-input>-->
      <x-address title="地址" v-model="addressValue" raw-value :list="addressData" value-text-align="left"></x-address>
      <x-input title="&emsp;" v-model="info.detailed_address" placeholder="请输入详细地址"></x-input>
      <x-input title="联<i class='vux-blank-half'></i>系<i class='vux-blank-half'></i>人" v-model="info.contacts" :min="2"></x-input>
      <x-input title="电&emsp;&emsp;&nbsp;话" name="mobile" v-model="info.tel" placeholder="请输入手机号码" keyboard="number" :is-type="yanTel"></x-input>
      <x-input title="邮&emsp;&emsp;&nbsp;箱" name="email" v-model="info.email" placeholder="请输入邮箱地址" is-type="email"></x-input>
      <div style="border-top: 1px #efefef solid;padding:5px 15px;clear: both;">
        <div class="weui-cell__hd" style="float: left;width: 4.5em;text-align: right;margin-right: 2em;">税务登记证</div>
        <div class="weui-uploader" @click="upClick('2')">
          <img :src="(info.tax_registration_img||baseImg+'?x-oss-process=image/resize,w_100,h_100')||'https://dlhz.oss-cn-beijing.aliyuncs.com/xey-upload/aPAPTyHrxt.png'" class="uploadImg"/>
        </div>
        <upload v-if="up2" @upload="upload2" @uploadReady="fileReady" style="display: none;"></upload>
      </div>
      <div style="border-top: 1px #efefef solid;padding:5px 15px;clear: both;">
        <div class="weui-cell__hd" style="float: left;width: 4.5em;text-align: right;margin-right: 2em;">营业执照</div>
        <div class="weui-uploader" @click="upClick('3')">
          <img :src="info.business_license||baseImg+'?x-oss-process=image/resize,w_100,h_100'" class="uploadImg"/>
        </div>
        <upload v-if="up3" @upload="upload3" @uploadReady="fileReady" style="display: none;"></upload>
      </div>
      <div style="width: 90%;margin: 1rem auto;"><x-button type="primary" style="background: #33bb99" @click.native="toSign">注 册</x-button></div>
    </group>
  </div>
</template>
<script>
  import upload from './Upload'
  import { XHeader, PopupRadio , Group, XInput, ChinaAddressData, XAddress, XTextarea } from 'vux'
  export default {
    name: "sign",
    components: {
      upload,
      Group,
      XHeader,
      PopupRadio,
      XInput,
      XAddress,
      XTextarea
    },
    data () {
      return {
        user:{
          name:'张三',
          nick:'zx111',
          mobile:'17794424097',
          pwd:'123456',
          sex:'0',
          head_url:''
        },
        info:{
          company_name:'东良恒州',
          tax_register_no:'15646413654',
          business_license_number:'5467464546',
          // invoices_head:'456456464',
          detailed_address:'高新大厦',
          contacts:'李四',
          tel:'17794424098',
          email:'1579432371@qq.com',
          tax_registration_img:'',
          business_license:'',
        },
        sexList: [{
          key: '0',
          value: '男'
        }, {
          key: '1',
          value: '女'
        }],
        url:'',
        addressData: ChinaAddressData,
        addressValue: ['广东省', '深圳市', '南山区'],
        yanTel:(value)=>{
          return {
            valid: this.public.isTel(value),
            msg: "电话号码输入不正确哦!"
          }
        },
        up1: false,
        up2: false,
        up3: false,
        baseImg: 'https://dlhz.oss-cn-beijing.aliyuncs.com/xey-upload/F76Rc5SemZ.png',
      }
    },
    methods:{
      // 返回
      back(){
        this.$router.push('/project0/login');
      },
      // 注册
      toSign(){
        console.log(this.user,this.info)
      },
      // 改变图片
      changeImg () {
        let input = document.getElementById('uploaderInput')
        input.addEventListener('change', function (e) {
          console.log(input.files[0])
          let file = input.files[0]  // 获取文件
          let reader = new FileReader()  // 创建读取文件的对象
          let imgFile  // 创建文件读取相关的变量
          // 为文件读取成功设置事件
          reader.onload = (e) => {
            alert('文件读取完成')
            imgFile = e.target.result
            // console.log(imgFile)
            console.log(imgFile)
            // $("#imgContent").attr('src', imgFile)
          }
          // 正式读取文件
          reader.readAsDataURL(file)
        })
      },
      // 点击初始化上传图片
      upClick(str){
        if(str==='1') {
          this.up1 = true;
          this.up2 = false;
          this.up3 = false;
        }
        if(str==='2') {
          this.up1 = false;
          this.up2 = true;
          this.up3 = false;
        }
        if(str==='3') {
          this.up1 = false;
          this.up2 = false;
          this.up3 = true;
        }
        setTimeout(s=>{
          $('#select-files').click();
        }, 300);
      },
      fileReady(){
        $('#post-files').click();
        this.$vux.loading.show();
      },
      // 上传头像
      upload1(file){
        this.user.head_url = this.config1.fileUrl+file;
        this.$vux.loading.hide();
        this.up1 = false;
        this.up2 = false;
        this.up3 = false;
      },
      // 税务登记证
      upload2(file){
        this.info.tax_registration_img = this.config1.fileUrl+file;
        this.$vux.loading.hide();
      },
      // 营业执照
      upload3(file){
        this.info.business_license = this.config1.fileUrl+file;
        this.$vux.loading.hide();
      }
    }
  }
</script>
<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  @import '../../../../node_modules/vux/src/styles/weui/widget/weui-uploader/index.less';

  .weui-uploader{
    position: relative;height: 5rem;margin-left: 33%;
  }
  .uploadImg{
    position: absolute;
    width: 4.8rem;height: 4.8rem;
    top: 0; left: 0;
    z-index: 2;
    background: #fff;
  }
</style>

